<template>
  <div>
    <button @click="flag = !flag">切换</button>
    <transition name="one">
      <div class="action" v-show="flag"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
    }
  },
  components: {},
}
</script>

<style>
.action {
  height: 100px;
  width: 100px;
  background-color: blue;
}
/* vue中动画含有专属类 */
/* 定义开始与离开的过渡生效时的动画状态 */
.one-enter-active,
.one-leave-active {
  transition: all 1s linear;
}
/* 进入时和移出时的状态 */
.one-enter,
.one-leave-to {
  opacity: 0;
}
/* 进入结束和移入开始的状态 */
.one-enter-to,
.one-leave {
  opacity: 1;
}
</style>
